<?php
$plugin_home = PLUGIN_URL.'tab_menu/';

js_enqueue(base_url()."yaml/add-ons/accessible-tabs/jquery.tabs"); 
js_enqueue(base_url()."yaml/add-ons/syncheight/jquery.syncheight");
 
css_enqueue($plugin_home."css/tab_menu");
css_enqueue('component/jd-tree');
js_enqueue('component/jd-tree');


function tab_menu_head(){
	echo <<<tab_menu_js
<style type="text/css">
  #js-info { display:block; padding: 10px 20px; background: #fee; color: #800; margin: 0 0 10px 0; }
  .js #js-info { display:none; }
  #col1 {
	width: 220px;
	}
  #col3 {
	margin-left: 220px;
	}
</style>
<!-- JavaScript Detection -->
<script type="text/javascript">document.documentElement.className += " js";</script>

<script type="text/javascript">
$(document).ready(function(){
	$(".example3").accessibleTabs({fx:"show",fxspeed: '', syncheights: true, tabbody:'.tab-content',listCustomClass:'compact'});
	$("h6.vlist").click(function(){
		$(this).next().toggle();
	});
	$('#tx-tree').jdTree();
});
</script>
tab_menu_js;
}
add_action('head','tab_menu_head');

?>
<div class="tab_menu">
 	<h6 class="vlist">Styled Navigation Title</h6>
          <ul class="vlist">
            <li><a href="#">Level 1, Item 1</a></li>
            <li><a href="#">Level 1, Item 2 </a></li>
            <li><a href="#">Level 1, Item 3 </a></li>
            <li><a href="#">Level 1, Item 4 </a></li>
          </ul>
          <div class="jquery_tabs example3">
       <h3>订阅</h3>
       <div class="tab-content">
        <div class="filter tags">
		<input type="text" placeholder="搜索订阅…"/>
		<a class="clear-search" title="clear search"></a>
	</div>
       <h4>Lorem ipsum ... </h4>
       <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
       <h4>Lorem ipsum ... </h4>
       <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
       </div>
       <h3>提醒</h3>
       <div class="tab-content">
         <div class="filter tags">
		<input type="text" placeholder="搜索提醒…"/>
		<a class="clear-search" title="clear search"></a>
	 	</div>
	 	<div id="tx-tree">
			<h6>工作提醒</h6>
			<ul>
				<li><a href="#">制定工作计划</a></li>
				<li><a href="#">编写测试用例</a></li>
				<li><a href="#">beta1.0上线</a></li>
				<li><a href="#">。。。</a></li>
			</ul>
			<h6>生活提醒</h6>
			<ul>
				<li><a href="#">客人来做客</a></li>
				<li><a href="#">去书店买书</a></li>
				<li><a href="#">请小啬吃饭</a></li>
				<li><a href="#">陪女友逛街</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
				<li><a href="#">。。。</a></li>
			</ul>
		</div>
       </div>
       <h3>事件</h3>
       <div class="tab-content">
         <div class="filter tags">
		<input type="text" placeholder="搜索事件…"/>
		<a class="clear-search" title="clear search"></a>
	 </div>
         <p>Your content could be here.</p>
       </div>
     </div>
</div>